<template>
  <div>
      <div class="v-switchs" @click="onChangeMode" :class="isDarkmode">
        <div class="v-switchs-bars" :class="isDarkmode">
              <div class="loadings" v-show="isload"></div>
        </div>
        <svg-icon icon-class="moon" size="1.1"></svg-icon>
        <svg-icon icon-class="sun" size="1.2"></svg-icon>
      </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, PropType, ref, watch } from "vue";
export default defineComponent({
  name: "VSwitch",
  props:{
      isload:{
           type:Boolean as PropType<Boolean>,
           defult:()=> false  
      },
      cheched:{
           type:Boolean as PropType<Boolean>,
           defult:()=> false 
      }    
  },
  emits:{
        handleClick:null
  },
  setup(prop,{emit}) {
    const isDarkmode = ref();
    let time:any = null;
    isDarkmode.value = prop.cheched ? "" : "active";
    watch(()=>prop.cheched,()=>{
          isDarkmode.value = prop.cheched ? "" : "active";
    })
    const onChangeMode = () => {
          time && clearTimeout(time)
          time = setTimeout(()=>{
               emit('handleClick',!prop.cheched);
               time=null;
          },200)
    };
    return {
      onChangeMode,
      isDarkmode,
    };
  },
});
</script>

<style lang="less" scoped>
@size: 16px;
.v-switchs {
  width: 45px;
  height: @size;
  position: relative;
  background: #ccc;
  border-radius: 34px;
  cursor: pointer;
  border: 3px solid #ccc;
  box-sizing: content-box;
  display: flex;
  justify-content: space-between;
   transition: all 0.2s ease-in-out 0s;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
   &.active {
       background: #001529;
       border: 3px solid rgba(0, 78, 151, 0.16);
       
    }
  &-bars {
    &.active {
      left: 29px;
      box-shadow: 0 2px 4px rgba(240, 240, 240, 0.6);
    }
    width: @size;
    height: @size;
    background: rgb(235, 233, 233);
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 30px;
    transition: all 0.2s ease-in-out 0s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    display: flex;
     justify-content: center;
     align-items: center;
    .loadings{
          width: calc(100% - 4px);
          height: calc(100% - 4px);
          border: 1px solid transparent;
          border-bottom: 1px solid #001529;
          border-top: 1px solid #001529;
          border-radius: 50%;
          animation: load .9s linear infinite;
          transform: rotate(0);
    }
  }
}
@keyframes load {
      0%{
           transform: rotate(0);
      }100%{
           transform: rotate(360deg);
      }
}
</style>